<template>
  <div
    class="home"
    v-waterMarker="{
      text: '刘亚磊',
      textColor: 'green',
    }"
  >
    <div class="header">
      <div class="headerTitle" v-for="(item, index) in imgs" :key="index">
        <dl>
          <dt><img :src="item.img" alt="" /></dt>
          <dd>
            <span
              v-if="index == 0"
              class="text"
              :style="{ color: item.backgroundColor }"
              >￥{{ item.price }}</span
            >
            <span
              v-else
              class="text"
              :style="{ color: item.backgroundColor }"
              >{{ item.price }}</span
            >
            <span>{{ item.title }}</span>
          </dd>
        </dl>
        <p>
          日同比&emsp;<span class="scale">{{ item.scale }}</span>
        </p>
      </div>
    </div>
    <div class="main">
      <div class="mainContent">
        <div class="left">
          <div id="main1" ref="myDom"></div>
        </div>
        <div class="right">
          <Tab />
        </div>
      </div>
      <div class="mainFooter">
        <div id="main3" ref="pieDom"></div>
        <div id="main3" ref="pieDom2"></div>
        <div id="main3" ref="pieDom3"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";
import * as echarts from "echarts";
import { onMounted } from "vue";
import { myresize } from "@/hooks/resize";
import Tab from "../../components/Myecharts.vue";
const imgs = [
  {
    img: require("../../static/Icons/png/今日已售(元).png"),
    price: 120,
    title: "今日已售(元)",
    scale: "增高20%",
    backgroundColor: "#00caa8",
  },
  {
    img: require("../../static/Icons/png/今日订票数.png"),
    price: 208,
    title: "今日订票数",
    scale: "增高20%",
    backgroundColor: "#559EFD",
  },
  {
    img: require("../../static/Icons/png/今日支付订单数.png"),
    price: 328,
    title: "今日支付订单数",
    scale: "增高20%",
    backgroundColor: "#ff8524",
  },
  {
    img: require("../../static/Icons/png/今日退票数.png"),
    price: 50,
    title: "今日退票数",
    scale: "增高20%",
    backgroundColor: "#ee729c",
  },
];
const myDom = ref(null);
const pieDom = ref(null);
const pieDom2 = ref(null);
const pieDom3 = ref(null);
function sale() {
  let chartDom = myDom.value;
  let myChart = echarts.init(chartDom);
  let option;
  option = {
    tooltip: {
      trigger: "axis",
    },
    title: {
      text: "近一周售票量",
      textStyle: {
        color: "#559EFD",
      },
      textAlign: "left",
    },
    legend: {
      data: [
        { name: "售票量", icon: "circle" },
        { name: "销售额", icon: "circle" },
      ],
    },
    xAxis: {
      type: "category",
      data: [
        "2022-10-11",
        "2022-10-12",
        "2022-10-13",
        "2022-10-14",
        "2022-10-15",
        "2022-10-16",
        "2022-10-17",
      ],
    },
    yAxis: [
      {
        type: "value",
        scale: true,
        name: "售票数量(张)",
        max: 100,
        min: 0,
      },
      {
        type: "value",
        name: "销售金额(元)",
        max: 2000,
        interval: 400,
        min: 0,
      },
    ],
    series: [
      {
        name: "售票量",
        data: [30, 41, 38, 41, 78, 83, 97],
        type: "line",
        backgroundStyle: "#559EFD",
        smooth: true,
        symbol: "circle",
        symbolSize: 10,
      },
      {
        name: "销售额",
        data: [440, 380, 600, 400, 1300, 1600, 1300],
        type: "bar",
        yAxisIndex: 1,
        itemStyle: {
          color: "#ee729c",
        },
        barMaxWidth: "20px",
      },
    ],
  };
  option && myChart.setOption(option);
  myresize(myChart);
}
function pie() {
  let chartDom = pieDom.value;
  let myChart = echarts.init(chartDom);
  let option;
  option = {
    title: { text: "今日订单占比", left: "center" },
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: [
        { name: "已付款", icon: "circle" },
        { name: "待付款", icon: "circle" },
        { name: "已取消", icon: "circle" },
      ],
      top: "20%",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        top: "30%",
        width: "auto",
        height: "auto",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },

        data: [
          {
            value: 720,
            name: "已付款",
            itemStyle: {
              color: "#ff8524",
            },
          },
          {
            value: 735,
            name: "待付款",
            itemStyle: {
              color: "#559EFD",
            },
          },
          {
            value: 30,
            name: "已取消",
            itemStyle: {
              color: "rgb(176,183,198)",
            },
          },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
  myresize(myChart);
}
function pie2() {
  let chartDom = pieDom2.value;
  let myChart = echarts.init(chartDom);
  let option;
  option = {
    title: { text: "今日支付方式对比", left: "center" },
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: [
        { name: "支付宝", icon: "circle" },
        { name: "微信", icon: "circle" },
        { name: "其他", icon: "circle" },
      ],
      top: "20%",
    },

    series: [
      {
        name: "Access From",
        type: "pie",
        top: "30%",
        width: "auto",
        height: "auto",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },

        data: [
          {
            value: 720,
            name: "支付宝",
            itemStyle: {
              color: "#559EFD",
            },
          },
          {
            value: 735,
            name: "微信",
            itemStyle: {
              color: "rgb(0,162,87)",
            },
          },
          {
            value: 30,
            name: "其他",
            itemStyle: {
              color: "rgb(176,183,198)",
            },
          },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
  myresize(myChart);
}
function pie3() {
  let chartDom = pieDom3.value;
  let myChart = echarts.init(chartDom);
  let option;
  option = {
    title: { text: "今日热门出发到达城市", left: "center" },
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: [
        { name: "三亚", icon: "circle" },
        { name: "深圳", icon: "circle" },
        { name: "北京", icon: "circle" },
        { name: "上海", icon: "circle" },
        { name: "武汉", icon: "circle" },
        { name: "香港", icon: "circle" },
        { name: "澳门", icon: "circle" },
        { name: "成都", icon: "circle" },
        { name: "桂林", icon: "circle" },
        { name: "哈尔滨", icon: "circle" },
      ],
      top: "20%",
    },
    series: [
      {
        name: "今日热门出发到达城市",
        type: "pie",
        top: "35%",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },

        data: [
          {
            value: 300,
            name: "三亚",
            itemStyle: {
              color: "#ee729c",
            },
          },
          {
            value: 200,
            name: "深圳",
            itemStyle: {
              color: "#ff8524",
            },
          },
          {
            value: 200,
            name: "北京",
            itemStyle: {
              color: "rgb(255,199,0)",
            },
          },
          {
            value: 150,
            name: "上海",
            itemStyle: {
              color: "rgb(103,214,94)",
            },
          },
          {
            value: 150,
            name: "武汉",
            itemStyle: {
              color: "rgb(0,124,0)",
            },
          },
          {
            value: 100,
            name: "香港",
            itemStyle: {
              color: "rgb(0,124,0)",
            },
          },
          {
            value: 100,
            name: "澳门",
            itemStyle: {
              color: "rgb(43,211,250)",
            },
          },
          {
            value: 80,
            name: "成都",
            itemStyle: {
              color: "rgb(85,158,253)",
            },
          },
          {
            value: 60,
            name: "桂林",
            itemStyle: {
              color: "rgb(80,94,224)",
            },
          },
          {
            value: 60,
            name: "哈尔滨",
            itemStyle: {
              color: "rgb(176,183,198)",
            },
          },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
  myresize(myChart);
}
onMounted(() => {
  sale();
  pie();
  pie2();
  pie3();
});
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.header {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #ccc;
  .headerTitle {
    width: 24%;
    height: 120px;
    background: #fff;
    margin: 20px 10px;
    border-radius: 10px;
    border: 2px solid #fff;
    dl {
      display: flex;
      justify-content: space-around;
      align-items: center;
      dt {
        width: 80px;
        height: 80px;
        margin-top: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      dd {
        display: flex;
        flex-direction: column;
        .text {
          font-size: 18px;
          margin-top: 10px;
        }
      }
    }
    p {
      margin-top: 10px;
      border-top: 1px solid #ccc;
      text-align: center;
      .scale {
        color: #00caa8;
      }
    }
  }
}
.main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .mainContent {
    width: 100%;
    height: 410px;
    display: flex;
    .left {
      width: 800px;
      height: 400px;
      background: #fff;
      margin-left: 50px;
      margin-right: 20px;
      border-radius: 10px;
      #main1 {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      width: 600px;
      height: 400px;
      background: #fff;
      margin-left: 10px;
      border-radius: 10px;
      #main2 {
        width: 100%;
        height: 100%;
      }
    }
  }
  .mainFooter {
    width: 1440px;
    height: calc(100% - 410px);
    background: #fff;
    margin-left: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;

    #main3 {
      width: 30%;
      height: 100%;
      border: 1px solid #ccc;
    }
  }
}
</style>
